﻿@{
    ViewBag.Title = "Tạo báo cáo tuần";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">

    var required = '<span style="color:red;font-weight:bold" data-qtip="Bắt buộc nhập">*</span>';

    //Ext.Loader.setPath('Ext.ux', 'extjs/ux');

    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*',
        'Ext.ux.window.Notification'
    ]);
    
    Ext.define('VTV.TaDMS.Extjs.Model.Report', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'ReportId', mapping: 'ReportId', type: 'int'
        }, {
            name: 'ReportTitle', mapping: 'ReportTitle', type: 'string'
        }, {
            name: 'CreateDate', mapping: 'CreateDate', type: 'date'
        }, {
            name: 'ReportContent', mapping: 'ReportContent', type: 'string'
        }],
        idProperty: 'ReportId'
    });
    
    Ext.define('VTV.TaDMS.Extjs.Model.ListWeek', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'StartWeek', mapping: 'StartWeek', type: 'date',
            convert: function (v, rec) {
                if (v) {
                    var date = new Date(v);
                    var a = Ext.Date.format(date, 'd-m-Y');
                    return a;
                } else {
                    return null;
                }
            }
        }, {
            name: 'EndWeek', mapping: 'EndWeek', type: 'date',
            convert: function (v, rec) {
                if (v) {
                    var date = new Date(v);
                    var a = Ext.Date.format(date, 'd-m-Y');
                    return a;
                } else {
                    return null;
                }
            }
        }, {
            name: 'NumberOfWeek', mapping: 'NumberOfWeek', type: 'int'
        }, {
            name: 'Year', mapping: 'Year', type: 'int'
        }, {
            name: 'Display',
            convert: function (v, rec) {
                var startWeek = rec.get('StartWeek');
                var endWeek = rec.get('EndWeek');
                var numberOfWeek = rec.get('NumberOfWeek');

                return 'Tuần ' + numberOfWeek + ' : từ ' + startWeek + ' đến ' + endWeek;
            }
        }]
    });

    Ext.onReady(function () {
        Ext.QuickTips.init();

        var weekStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.ListWeek',
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiReport/GetListWeek'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        Ext.create('Ext.container.Viewport', {
            margins: '25 25 25 25',
            //autoScroll: true,
            layout: 'fit',
            items: [{
                xtype: 'form',
                id: 'frmMain1',
                layout: 'form',
                autoHeight: true,
                //height: '70',
                //frame: true,
                bodyPadding: '5 5 0',
                //plugins: {
                //    ptype: 'datatip'
                //},
                fieldDefaults: {
                    msgTarget: 'side',
                    labelWidth: 110
                    //anchor: '100%'
                },
                items: [{
                    //xtype: 'combo', id: 'comboWeek', store: weekStore, valueField: 'StartWeek', displayField: 'Display',
                    //typeAhead: false, pageSize: false, fieldLabel: 'Tuần',
                    //listConfig: {
                    //    loadingText: 'Tìm kiếm',
                    //    emptyText: 'Không có kết quả phù hợp',
                    //    getInnerTpl: function () {
                    //        return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                    //                '{Display}' +
                    //               '</div>';
                    //    }
                    //}
                    xtype: 'textfield',
                    anchor: '100%',
                    fieldLabel: 'Tiêu đề',
                    id: 'txtTitle'
                }, {
                    xtype: 'datefield', fieldLabel: 'Ngày báo cáo', id: 'txtCreateDate', value: new Date(), format: 'd-m-Y'
                }, {
                    xtype: 'htmleditor',
                    id: 'htmlContent',
                    fieldLabel: 'Nội dung báo cáo',
                    allowBlank: false,
                    afterLabelTextTpl: required,
                    height: 550
                    //layout: 'fit'
                }],
                buttons: [{
                    text: 'Gửi báo cáo',
                    handler: function () {
                        if (Ext.getCmp('frmMain1').isValid()) {
                            
                            var notificationConfig = {
                                position: 't',
                                cls: 'ux-notification-light',
                                closable: false,
                                html: 'Đang thực hiện...',
                                slideInAnimation: 'elasticIn',
                                slideBackAnimation: 'elasticIn',
                                width: 160,
                                height: 40,
                                id: 'ttt'
                            };
                            Ext.create('widget.uxNotification', notificationConfig).show();
                            notificationConfig.useXAxis = true;
                            
                            var entity = {
                                ReportTitle: Ext.getCmp('txtTitle').getValue(),
                                ReportContent: Ext.getCmp('htmlContent').getValue(),
                                CreateDate: Ext.getCmp('txtCreateDate').getValue()
                            };

                            Ext.getCmp('txtTitle').enable(true);
                            Ext.getCmp('htmlContent').enable(true);
                            Ext.getCmp('txtCreateDate').enable(true);

                            Ext.Ajax.request({
                                url: '/api/ApiReport/Create',
                                method: 'POST',
                                jsonData: entity,
                                success: function (transport, option) {
                                    var responseData = Ext.decode(transport.responseText);
                                    if (responseData.success == true) {
                                        Ext.getCmp('txtTitle').setValue('');
                                        Ext.getCmp('htmlContent').setValue('');
                                        
                                        Ext.getCmp('txtTitle').enable(false);
                                        Ext.getCmp('htmlContent').enable(false);
                                        Ext.getCmp('txtCreateDate').enable(false);

                                        Ext.getCmp('ttt').close();
                                        
                                        Ext.create('widget.uxNotification', {
                                            position: 'tr',
                                            useXAxis: true,
                                            cls: 'ux-notification-light',
                                            iconCls: 'ux-notification-icon-success',
                                            closable: true,
                                            title: 'Thông báo',
                                            html: 'Gửi báo cáo thành công.',
                                            slideInDuration: 800,
                                            slideBackDuration: 1500,
                                            slideInAnimation: 'elasticIn',
                                            slideBackAnimation: 'elasticIn',
                                            width: 200
                                        }).show();
                                        
                                    } else {
                                        Ext.getCmp('txtTitle').enable(false);
                                        Ext.getCmp('htmlContent').enable(false);
                                        Ext.getCmp('txtCreateDate').enable(false);
                                        Ext.getCmp('ttt').close();
                                        
                                        Ext.MessageBox.show({
                                            title: 'Lỗi',
                                            msg: responseData.message,
                                            icon: Ext.MessageBox.ERROR,
                                            buttons: Ext.Msg.OK
                                        });
                                    }
                                },
                                failure: function (transport, option) {
                                    Ext.getCmp('txtTitle').enable(false);
                                    Ext.getCmp('htmlContent').enable(false);
                                    Ext.getCmp('txtCreateDate').enable(false);
                                    Ext.getCmp('ttt').close();
                                    
                                    var responseData = Ext.decode(transport.responseText);
                                    Ext.MessageBox.show({
                                        title: 'Lỗi',
                                        msg: responseData.message,
                                        icon: Ext.MessageBox.ERROR,
                                        buttons: Ext.Msg.OK
                                    });
                                }
                            });
                        }
                    }
                }, {
                    text: 'Xem danh sách',
                    handler: function () {
                        Ext.create('ReportWindow1', {
                            id: 'newReportWindow1'
                        }).show();
                    }
                }]
            }]
        });
        
        var reportStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Report',
            //autoLoad: { param: { start: 0, limit: 15 } },
            //pageSize: 15,
            //autoSync: true,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiReport/GetAll'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });
        
        Ext.define('ReportWindow1', {
            extend: 'Ext.window.Window',
            title: 'Danh sách báo cáo đã gửi', layout: 'fit', modal: true,
            header: {
                titleAlign: 'center'
            },
            resizable: {
                handles: 'e w'
            },
            width: 500,
            height: 350,
            items: [{
                xtype: 'grid',
                store: reportStore,
                columns: [{
                    text: 'Ngày tạo', dataIndex: 'CreateDate', width: 120, renderer: Ext.util.Format.dateRenderer('d-m-Y')
                }, {
                    text: 'Tiêu đề', dataIndex: 'ReportTitle', flex: 1
                }, {
                    menuDisabled: true,
                    sortable: false,
                    xtype: 'actioncolumn',
                    text: 'Thao tác',
                    align: 'center',
                    width: 60,
                    items: [{
                        icon: '../Content/icon/delete.gif',
                        tooltip: 'Xóa',
                        handler: function (grid, rowIndex, colIndex, item, e, record) {
                            Ext.Msg.show({
                                title: 'Xác nhận',
                                msg: 'Xác nhận xóa dữ liệu ?',
                                width: 250,
                                buttons: Ext.MessageBox.OKCANCEL,
                                buttonText: {
                                    ok: 'Xóa',
                                    cancel: 'Hủy'
                                },
                                icon: Ext.MessageBox.QUESTION,
                                fn: function (buttonId, text, opt) {
                                    if (buttonId == 'ok') {
                                        var gridStore = grid.getStore();
                                        var rec = gridStore.getAt(rowIndex);
                                        if (rec) {
                                            var entity = {
                                                ReportId: rec.get('ReportId')
                                            };

                                            Ext.Ajax.request({
                                                url: '/api/ApiReport/Delete',
                                                method: 'POST',
                                                jsonData: entity,
                                                success: function (transport, option) {
                                                    var responseData = Ext.decode(transport.responseText);
                                                    if (responseData.success == true) {
                                                        gridStore.remove(rec);

                                                    } else {
                                                        Ext.MessageBox.show({
                                                            title: 'Lỗi',
                                                            msg: responseData.message,
                                                            icon: Ext.MessageBox.ERROR,
                                                            buttons: Ext.Msg.OK
                                                        });
                                                    }
                                                },
                                                failure: function (transport, option) {
                                                    var responseData = Ext.decode(transport.responseText);
                                                    Ext.MessageBox.show({
                                                        title: 'Lỗi',
                                                        msg: responseData.message,
                                                        icon: Ext.MessageBox.ERROR,
                                                        buttons: Ext.Msg.OK
                                                    });
                                                }
                                            });
                                        }
                                    }
                                    else if (buttonId == 'cancel') {

                                    }
                                }
                            });
                        }
                    }, {
                        icon: '../Content/icon/edit.png',
                        tooltip: 'Sửa',
                        handler: function (grid, rowIndex, colIndex, item, e, record) {
                            var gridStore = grid.getStore();
                            var rec = gridStore.getAt(rowIndex);
                            Ext.getCmp('txtTitle').setValue(rec.get('ReportTitle'));
                            Ext.getCmp('htmlContent').setValue(rec.get('ReportContent'));

                            Ext.getCmp('newReportWindow1').close();
                        }
                    }]
                }]
                //bbar: new Ext.PagingToolbar({
                //    pageSize: 15,
                //    store: reportStore,
                //    displayInfo: true,
                //    displayMsg: 'Danh sách: {0} đến {1}.  Tổng số: {2}',
                //    emptyMsg: "Không có nhân viên nào"
                //})
            }],
            listeners: {
                beforerender: function ( eOpts ) {
                    //reportStore.getProxy().extraParams = {
                    //    userId: 1
                    //};

                    reportStore.load();
                }
            },
            buttons: [{
                text: 'Quay lại',
                handler: function () {
                    Ext.getCmp('newReportWindow1').close();
                }
            }]
        });
    });

</script>

